<script lang="ts" setup name="ShowPreview">
import { ref } from 'vue'
import { _ } from 'iking-utils'
import type { treeNode } from './download-file'
import { downloadFile, downloadSingleFile } from './download-file'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '新建表单'
  },
  editData: {
    type: Object,
    default: () => null
  },
  previewData: {
    type: Object,
    default: () => null
  }
})
const emits = defineEmits<{
  (event: 'cancel'): void
  (event: 'update:visible', value: boolean): void
  (event: 'confirm'): void
}>()

const dVisible = ref(props.visible)

const previewTree = ref<treeNode>({
  label: '.gitignore',
  type: 'txt',
  content: '',
  children: []
})
const findNode = (tree: treeNode, func: any) => {
  const curTree: any = _.cloneDeep(tree)
  for (let i = 0; i < curTree.length; i++) {
    if (func(curTree[i]))
      return curTree[i]

    if (curTree[i].children)
      curTree.splice(curTree.length - 1, 0, ...curTree[i].children)
  }
}
const findPreviewTree = (node: treeNode) => {
  const data = findNode(node, (item: any) => {
    return !item.children
  })
  if (data)
    return data

  return false
}
watch(
  () => props.visible,
  async visible => {
    if (visible) {
      if (props.previewData) {
        previewTree.value = findPreviewTree(props.previewData.children) || {
          label: '.gitignore',
          type: 'txt',
          content: '',
          children: []
        }
      }
      else {
        previewTree.value = {
          label: '.gitignore',
          type: 'txt',
          content: '',
          children: []
        }
      }
    }
    dVisible.value = visible
  }
)

const handelCancel = () => {
  dVisible.value = false
  emits('update:visible', false)
}
const handelClosed = () => {
  dVisible.value = false
  emits('cancel')
  handelCancel()
}
// const handelConfirm = async () => {
//   emits('cancel')
// }
const handelDownload = async () => {
  await downloadFile(props.editData)
}
const handelDowSingle = async () => {
  await downloadSingleFile(previewTree.value)
}
const nodeClick = (node: any) => {
  if (node.content)
    previewTree.value = node
}
</script>

<template>
  <el-dialog
    v-model="dVisible"
    class="form-design"
    width="1200px"
    draggable
    :close-on-click-modal="false"
    @closed="handelClosed"
  >
    <template #header>
      <el-row>
        <el-col :span="6" class="elfz">
          <strong>{{ props.previewData?.label || "demo.zip" }}</strong>
        </el-col>
        <el-col :span="18" class="elfz">
          <strong>{{ previewTree?.label || "demo.zip" }} </strong>
          <a class="dow-right" @click="handelDowSingle">下载当前源码</a>
          <a class="dow-right" @click="handelDownload">下载源码包</a>
        </el-col>
      </el-row>
    </template>
    <el-row>
      <el-col :span="6" class="elcol">
        <el-tree
          :data="props.previewData.children"
          node-key="label"
          class="el-left"
          @node-click="nodeClick"
        >
          <template #default="{ node, data }">
            <div class="tree-node">
              <el-icon v-show="!data.content">
                <IkSvgIcon name="file" />
              </el-icon>
              <el-icon v-show="data.content">
                <IkSvgIcon name="fileEmpty" />
              </el-icon>
              <span class="node-label">{{ node.label }}</span>
            </div>
          </template>
        </el-tree>
      </el-col>
      <el-col :span="18" class="elcol">
        <IkMonacoEditor
          class="w-full"
          :language="previewTree?.type || 'java'"
          :height="600"
          :code="previewTree?.content || ''"
        />
      </el-col>
    </el-row>
  </el-dialog>
</template>

<style lang="scss" scoped>
.elfz {
  font-size: 14px;
  font-weight: 400;
}
// .el-left {
//   overflow-x: auto;
//   overflow-y: hidden;
//   max-width: 101%;
// }

.elcol {
  font-size: 14px;
  font-weight: 400;
  height: 600px;
  overflow: auto;
}

.el-tree-node__label {
  margin: 5px !important;
}

.tree-node {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;

  .node-label {
    margin-left: 10px;
  }
}

.dow-right {
  display: inline-block;
  cursor: pointer;
  color: #0188ff;
  margin-left: 15px;
}
</style>
